<template>
  <view class="comment feat-grid">


    <view class="comment-title">留墨阁</view>
    <view v-for="(item,index) in renderData.list" class="comment-list mt40">
      <comListItem :isArrow="false" :comTitle="filterName(item)" :comDetail="timeFormat(item.createdAt,'mm-dd hh:ss') + ' 发布'">
        <template #header>
          <view class="comment-list-head">
            <uv-image
              :width = "width"
              :height = "height"
              shape="circle"
              :src="item.User?.avatar"
            ></uv-image>
          </view>
        </template>
      </comListItem>
      <view class="comment-list-tag fx-row-s">
        <view class="comment-evaluate-list active-evaluate fx-row-s">
          <uv-icon class="comment-evaluate-list-icon" size="32" custom-prefix="custom-icon" :name="filterRate(item).iconName"></uv-icon>
          <view class="comment-evaluate-list-text">{{ filterRate(item).text }}</view>
        </view>

        <uv-tag v-show="indexTag > 3 ? false:true" v-for="(itemTag,indexTag) in filterDim(item)"
                class="ml20" size="mini" mode="dark" shape="circle" :text="itemTag" clear
                :color="color.colorTextB"  :bg-color="color.colorTextE"
        />
      </view>
      <view class="comment-list-content">
        {{ item.Content }}
      </view>
    </view>

    <view class="no-data mt30" v-if="!renderData.list.length">
      暂无相关评论
    </view>


  </view>
</template>
<script setup>
import {ref,reactive,computed,watch} from 'vue'
import comListItem from '@/components/com-list/index-list';
import noData from '@/components/com-nodata';
import { onReachBottom } from "@dcloudio/uni-app";
import { header,color,mine } from '@/enums/constants';
import { ossImage,timeFormat } from '@/utils/index';
import playApi from "@/apis/play";
const {width , height} = {...header.small};

const renderData = reactive({
  //评论列表参数
  pageIndex:1,
  pageSize:mine.pageSize,
  list:[],
})

const props = defineProps({
  id:String,
})

//获取评论列表
const handleGetScriptCommentList = (type)=>{
  let para={
    pageSize:renderData.pageSize,
    pageIndex:renderData.pageIndex,
    scriptId:props.id || ''
  }
  playApi.getScriptCommentList(para).then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      if(res.data?.length<=0 && type=='scroll'){
        uni.showToast({
          icon:'none',
          title:'到底啦!'
        })
      }else{
        renderData.list = renderData.list.concat(res.data);
        renderData.pageIndex++;
      }
    }
  })
}


watch(()=>props.id, (newValue, oldValue) => {
  if(props.id && renderData.list.length<=0){
    handleGetScriptCommentList();
  }
},{ immediate: true })


//评分过滤
const filterRate = computed(()=>{
  return (obj)=>{
    let rate = obj.StatifiLevel > 0 ? obj.StatifiLevel : 5
    let arr = mine.commentDegree.filter((item)=>{
      return item.val == rate;
    })
    return arr[0]
  }
})

//维度过滤
const filterDim = computed(()=>{
  return (item) =>{
    if(item.Dim){

      let arrText = item.Dim.split(',');
      let arrRate = item.Rate?.split(',') ?? ''
      let newMap = arrText.map((item,index)=>{
        let rate = item + " " +arrRate[index] ?? '';
        return rate
      })
      return newMap;
    }else{
      return [];
    }
  }
})

//名称过滤
const filterName = computed(()=>{
  return (item) =>{
    if(!item.Anonymous){
      return item.User?.nickname
    }else{
      let str = item.User?.nickname; // 你的字符串
      let replacedStr = str.replace(/^(.).*(.)$/, "$1**$2");
      return replacedStr
    }
  }
})


onReachBottom(()=>{
  if(renderData.list.length<8){return}
  handleGetScriptCommentList('scroll');

})


</script>

<style lang="scss" scoped>



.comment{
  padding:30rpx;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  &-title{
    position: relative;
    @include main-text2;
    font-weight:500;
    text-align: center;
    color:$main-text-a;

    &:after{
      content:'';
      position: absolute;
      height: 10rpx;
      width: 50rpx;
      background-color: $main-c;
      left:50%;
      top:100%;
      transform: translateX(-50%);
    }
  }
  &-list{
    &-head{margin-right: 20rpx;}
    &-content{
      @include main-line1;
      @include main-text4;
      color:$main-text-a;
      text-indent: 55rpx;
      line-height: 1.6;
    }

    &-tag{
      padding:10rpx 0 16rpx;
      .comment-evaluate-list{
        color:$main-text-b;
        padding:3rpx 12rpx;
        border-radius:20rpx;
        &-text{@include main-text5;}
        &-icon{
          margin-right: 5rpx;
          // #ifdef MP-WEIXIN
          position:relative;top:3rpx;
          // #endif
        }
      }
      .active-evaluate{
        background-color: $main-f;
        color:$main-g;
      }
    }
  }

  .no-data{
    padding-top:40rpx;
    padding-bottom:60rpx;
    font-family: alimama;
    @include main-text3;
    color:$main-text-c;
    text-align: center;
  }


}

</style>
